<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>dependency graph</title>
    <style>
      .node:active path,
.node:hover path,
.node.current path,
.node:active polygon,
.node:hover polygon,
.node.current polygon {
  stroke: fuchsia;
  stroke-width: 2;
}

.edge:active path,
.edge:hover path,
.edge.current path,
.edge:active ellipse,
.edge:hover ellipse,
.edge.current ellipse {
  stroke: url(#edgeGradient);
  stroke-width: 3;
  stroke-opacity: 1;
}

.edge:active polygon,
.edge:hover polygon,
.edge.current polygon {
  stroke: fuchsia;
  stroke-width: 3;
  fill: fuchsia;
  stroke-opacity: 1;
  fill-opacity: 1;
}

.edge:active text,
.edge:hover text {
  fill: fuchsia;
}

.cluster path {
  stroke-width: 3;
}

.cluster:active path,
.cluster:hover path {
  fill: #ffff0011;
}

div.hint {
  background-color: #000000aa;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 1rem;
  position: fixed;
  top: calc(50% - 4em);
  right: calc(50% - 10em);
  border: none;
  padding: 1em 3em 1em 1em;
}

.hint button {
  position: absolute;
  font-weight: bolder;
  right: 0.6em;
  top: 0.6em;
  color: inherit;
  background-color: inherit;
  border: 1px solid currentColor;
  border-radius: 1em;
  margin-left: 0.6em;
}

.hint a {
  color: inherit;
}

#button_help {
  color: white;
  background-color: #00000011;
  border-radius: 1em;
  position: fixed;
  top: 1em;
  right: 1em;
  font-size: 24pt;
  font-weight: bolder;
  width: 2em;
  height: 2em;
  border: none;
}

#button_help:hover {
  cursor: pointer;
  background-color: #00000077;
}

@media print {
  #button_help {
    display: none;
  }

  div.hint {
    display: none;
  }
}

    </style>
  </head>
  <body>
    <button id="button_help">?</button>
    <div id="hints" class="hint" style="display: none">
      <button id="close-hints">x</button>
      <span id="hint-text"></span>
      <ul>
        <li><b>Hover</b> - highlight</li>
        <li><b>Right-click</b> - pin highlight</li>
        <li><b>ESC</b> - clear</li>
      </ul>
    </div>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 14.0.2 (20251019.1705)
 -->
<!-- Title: dependency&#45;cruiser output Pages: 1 -->
<svg width="749pt" height="426pt"
 viewBox="0.00 0.00 749.00 426.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 422)">
<title>dependency&#45;cruiser output</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-422 745.25,-422 745.25,4 -4,4"/>
<g id="clust1" class="cluster">
<title>cluster_src</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M20,-8C20,-8 721.25,-8 721.25,-8 727.25,-8 733.25,-14 733.25,-20 733.25,-20 733.25,-398 733.25,-398 733.25,-404 727.25,-410 721.25,-410 721.25,-410 20,-410 20,-410 14,-410 8,-404 8,-398 8,-398 8,-20 8,-20 8,-14 14,-8 20,-8"/>
<text xml:space="preserve" text-anchor="middle" x="370.62" y="-397.45" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">src</text>
</g>
<g id="clust2" class="cluster">
<title>cluster_src/parse</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M237,-272C237,-272 566.5,-272 566.5,-272 572.5,-272 578.5,-278 578.5,-284 578.5,-284 578.5,-372 578.5,-372 578.5,-378 572.5,-384 566.5,-384 566.5,-384 237,-384 237,-384 231,-384 225,-378 225,-372 225,-372 225,-284 225,-284 225,-278 231,-272 237,-272"/>
<text xml:space="preserve" text-anchor="middle" x="401.75" y="-371.45" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">parse</text>
</g>
<g id="clust3" class="cluster">
<title>cluster_src/render</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M225,-70C225,-70 547.25,-70 547.25,-70 553.25,-70 559.25,-76 559.25,-82 559.25,-82 559.25,-198 559.25,-198 559.25,-204 553.25,-210 547.25,-210 547.25,-210 225,-210 225,-210 219,-210 213,-204 213,-198 213,-198 213,-82 213,-82 213,-76 219,-70 225,-70"/>
<text xml:space="preserve" text-anchor="middle" x="386.12" y="-197.45" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">render</text>
</g>
<!-- src/cli -->
<g id="node1" class="node">
<title>src/cli</title>
<g id="a_node1"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/cli" xlink:title="cli">
<polygon fill="#ccffcc" stroke="black" points="70,-47.88 17.97,-47.88 16,-45.9 16,-30.12 68.03,-30.12 70,-32.1 70,-47.88"/>
<polyline fill="none" stroke="black" points="68.03,-45.9 16,-45.9"/>
<polyline fill="none" stroke="black" points="68.03,-45.9 68.03,-30.12"/>
<polyline fill="none" stroke="black" points="68.03,-45.9 70,-47.88"/>
<text xml:space="preserve" text-anchor="start" x="38.5" y="-35.33" font-family="Helvetica,sans-Serif" font-size="9.00">cli</text>
</a>
</g>
</g>
<!-- src/index&#45;node.mts -->
<g id="node2" class="node">
<title>src/index&#45;node.mts</title>
<g id="a_node2"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/index-node.mts" xlink:title="index&#45;node.mts">
<path fill="#ddfeff" stroke="black" d="M179.08,-82.88C179.08,-82.88 111.92,-82.88 111.92,-82.88 108.96,-82.88 106,-79.92 106,-76.96 106,-76.96 106,-71.04 106,-71.04 106,-68.08 108.96,-65.12 111.92,-65.12 111.92,-65.12 179.08,-65.12 179.08,-65.12 182.04,-65.12 185,-68.08 185,-71.04 185,-71.04 185,-76.96 185,-76.96 185,-79.92 182.04,-82.88 179.08,-82.88"/>
<text xml:space="preserve" text-anchor="start" x="114" y="-70.33" font-family="Helvetica,sans-Serif" font-size="9.00">index&#45;node.mts</text>
</a>
</g>
</g>
<!-- src/cli&#45;&gt;src/index&#45;node.mts -->
<g id="edge1" class="edge">
<title>src/cli&#45;&gt;src/index&#45;node.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M52.25,-48.2C52.25,-58.57 52.25,-74 52.25,-74 52.25,-74 96.66,-74 96.66,-74"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="96.66,-76.1 102.66,-74 96.66,-71.9 96.66,-76.1"/>
</g>
<!-- src/version.mts -->
<g id="node3" class="node">
<title>src/version.mts</title>
<g id="a_node3"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/version.mts" xlink:title="version.mts">
<path fill="#ddfeff" stroke="black" d="M285.83,-47.88C285.83,-47.88 235.17,-47.88 235.17,-47.88 232.21,-47.88 229.25,-44.92 229.25,-41.96 229.25,-41.96 229.25,-36.04 229.25,-36.04 229.25,-33.08 232.21,-30.12 235.17,-30.12 235.17,-30.12 285.83,-30.12 285.83,-30.12 288.79,-30.12 291.75,-33.08 291.75,-36.04 291.75,-36.04 291.75,-41.96 291.75,-41.96 291.75,-44.92 288.79,-47.88 285.83,-47.88"/>
<text xml:space="preserve" text-anchor="start" x="237.25" y="-35.33" font-family="Helvetica,sans-Serif" font-size="9.00">version.mts</text>
</a>
</g>
</g>
<!-- src/cli&#45;&gt;src/version.mts -->
<g id="edge2" class="edge">
<title>src/cli&#45;&gt;src/version.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M70.11,-36.04C70.11,-36.04 219.79,-36.04 219.79,-36.04"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="219.79,-38.14 225.79,-36.04 219.79,-33.94 219.79,-38.14"/>
</g>
<!-- src/options.mts -->
<g id="node4" class="node">
<title>src/options.mts</title>
<g id="a_node4"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/options.mts" xlink:title="options.mts">
<path fill="#ddfeff" stroke="black" d="M691.21,-136.88C691.21,-136.88 640.54,-136.88 640.54,-136.88 637.58,-136.88 634.62,-133.92 634.62,-130.96 634.62,-130.96 634.62,-125.04 634.62,-125.04 634.62,-122.08 637.58,-119.12 640.54,-119.12 640.54,-119.12 691.21,-119.12 691.21,-119.12 694.17,-119.12 697.12,-122.08 697.12,-125.04 697.12,-125.04 697.12,-130.96 697.12,-130.96 697.12,-133.92 694.17,-136.88 691.21,-136.88"/>
<text xml:space="preserve" text-anchor="start" x="642.62" y="-124.33" font-family="Helvetica,sans-Serif" font-size="9.00">options.mts</text>
</a>
</g>
</g>
<!-- src/cli&#45;&gt;src/options.mts -->
<g id="edge3" class="edge">
<title>src/cli&#45;&gt;src/options.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M34.25,-48.16C34.25,-52.39 34.25,-56.5 34.25,-56.5 34.25,-56.5 666.25,-56.5 666.25,-56.5 666.25,-56.5 666.25,-109.63 666.25,-109.63"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="664.15,-109.63 666.25,-115.63 668.35,-109.63 664.15,-109.63"/>
</g>
<!-- src/index&#45;node.mts&#45;&gt;src/version.mts -->
<g id="edge8" class="edge">
<title>src/index&#45;node.mts&#45;&gt;src/version.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M185.31,-68.38C218.45,-68.38 260.25,-68.38 260.25,-68.38 260.25,-68.38 260.25,-57.32 260.25,-57.32"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="262.35,-57.32 260.25,-51.32 258.15,-57.32 262.35,-57.32"/>
</g>
<!-- src/index&#45;node.mts&#45;&gt;src/options.mts -->
<g id="edge4" class="edge">
<title>src/index&#45;node.mts&#45;&gt;src/options.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M185.11,-71.62C304.1,-71.62 650.25,-71.62 650.25,-71.62 650.25,-71.62 650.25,-109.66 650.25,-109.66"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="648.15,-109.66 650.25,-115.66 652.35,-109.66 648.15,-109.66"/>
</g>
<!-- src/parse/index.mts -->
<g id="node6" class="node">
<title>src/parse/index.mts</title>
<g id="a_node6"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/parse/index.mts" xlink:title="index.mts">
<path fill="#ffccff" stroke="black" d="M282.08,-297.88C282.08,-297.88 238.92,-297.88 238.92,-297.88 235.96,-297.88 233,-294.92 233,-291.96 233,-291.96 233,-286.04 233,-286.04 233,-283.08 235.96,-280.12 238.92,-280.12 238.92,-280.12 282.08,-280.12 282.08,-280.12 285.04,-280.12 288,-283.08 288,-286.04 288,-286.04 288,-291.96 288,-291.96 288,-294.92 285.04,-297.88 282.08,-297.88"/>
<text xml:space="preserve" text-anchor="start" x="241" y="-285.32" font-family="Helvetica,sans-Serif" font-size="9.00">index.mts</text>
</a>
</g>
</g>
<!-- src/index&#45;node.mts&#45;&gt;src/parse/index.mts -->
<g id="edge5" class="edge">
<title>src/index&#45;node.mts&#45;&gt;src/parse/index.mts</title>
<path fill="none" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" d="M177.25,-83.24C177.25,-124.39 177.25,-289 177.25,-289 177.25,-289 223.75,-289 223.75,-289"/>
<polygon fill="#ff00ff" fill-opacity="0.466667" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" points="223.75,-291.1 229.75,-289 223.75,-286.9 223.75,-291.1"/>
</g>
<!-- src/render/index&#45;node.mts -->
<g id="node7" class="node">
<title>src/render/index&#45;node.mts</title>
<g id="a_node7"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/render/index-node.mts" xlink:title="index&#45;node.mts">
<path fill="#ccccff" stroke="black" d="M294.08,-95.88C294.08,-95.88 226.92,-95.88 226.92,-95.88 223.96,-95.88 221,-92.92 221,-89.96 221,-89.96 221,-84.04 221,-84.04 221,-81.08 223.96,-78.12 226.92,-78.12 226.92,-78.12 294.08,-78.12 294.08,-78.12 297.04,-78.12 300,-81.08 300,-84.04 300,-84.04 300,-89.96 300,-89.96 300,-92.92 297.04,-95.88 294.08,-95.88"/>
<text xml:space="preserve" text-anchor="start" x="229" y="-83.33" font-family="Helvetica,sans-Serif" font-size="9.00">index&#45;node.mts</text>
</a>
</g>
</g>
<!-- src/index&#45;node.mts&#45;&gt;src/render/index&#45;node.mts -->
<g id="edge6" class="edge">
<title>src/index&#45;node.mts&#45;&gt;src/render/index&#45;node.mts</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M185.38,-74.88C205.31,-74.88 225.25,-74.88 225.25,-74.88 225.25,-74.88 225.25,-75.16 225.25,-75.16"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="223.15,-68.66 225.25,-74.66 227.35,-68.66 223.15,-68.66"/>
</g>
<!-- src/transform -->
<g id="node8" class="node">
<title>src/transform</title>
<g id="a_node8"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/transform" xlink:title="transform">
<polygon fill="#ffffcc" stroke="black" points="551.38,-263.88 499.1,-263.88 497.12,-261.9 497.12,-246.12 549.4,-246.12 551.38,-248.1 551.38,-263.88"/>
<polyline fill="none" stroke="black" points="549.4,-261.9 497.12,-261.9"/>
<polyline fill="none" stroke="black" points="549.4,-261.9 549.4,-246.12"/>
<polyline fill="none" stroke="black" points="549.4,-261.9 551.38,-263.88"/>
<text xml:space="preserve" text-anchor="start" x="505.12" y="-251.32" font-family="Helvetica,sans-Serif" font-size="9.00">transform</text>
</a>
</g>
</g>
<!-- src/index&#45;node.mts&#45;&gt;src/transform -->
<g id="edge7" class="edge">
<title>src/index&#45;node.mts&#45;&gt;src/transform</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M181.25,-83.07C181.25,-119.36 181.25,-252.04 181.25,-252.04 181.25,-252.04 487.73,-252.04 487.73,-252.04"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="487.73,-254.14 493.73,-252.04 487.73,-249.94 487.73,-254.14"/>
</g>
<!-- src/counter.mts -->
<g id="node5" class="node">
<title>src/counter.mts</title>
<g id="a_node5"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/counter.mts" xlink:title="counter.mts">
<path fill="#ddfeff" stroke="black" d="M691.58,-331.88C691.58,-331.88 640.17,-331.88 640.17,-331.88 637.21,-331.88 634.25,-328.92 634.25,-325.96 634.25,-325.96 634.25,-320.04 634.25,-320.04 634.25,-317.08 637.21,-314.12 640.17,-314.12 640.17,-314.12 691.58,-314.12 691.58,-314.12 694.54,-314.12 697.5,-317.08 697.5,-320.04 697.5,-320.04 697.5,-325.96 697.5,-325.96 697.5,-328.92 694.54,-331.88 691.58,-331.88"/>
<text xml:space="preserve" text-anchor="start" x="642.25" y="-319.32" font-family="Helvetica,sans-Serif" font-size="9.00">counter.mts</text>
</a>
</g>
</g>
<!-- src/parse/index.mts&#45;&gt;src/options.mts -->
<g id="edge14" class="edge">
<title>src/parse/index.mts&#45;&gt;src/options.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M274.25,-279.68C274.25,-256.61 274.25,-198.71 274.25,-198.71 274.25,-198.71 681.25,-198.71 681.25,-198.71 681.25,-198.71 681.25,-146.27 681.25,-146.27"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="683.35,-146.27 681.25,-140.27 679.15,-146.27 683.35,-146.27"/>
</g>
<!-- src/parse/scxml -->
<g id="node11" class="node">
<title>src/parse/scxml</title>
<g id="a_node11"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/parse/scxml" xlink:title="scxml">
<polygon fill="#ffccff" stroke="black" points="416,-327.88 363.97,-327.88 362,-325.9 362,-310.12 414.03,-310.12 416,-312.1 416,-327.88"/>
<polyline fill="none" stroke="black" points="414.03,-325.9 362,-325.9"/>
<polyline fill="none" stroke="black" points="414.03,-325.9 414.03,-310.12"/>
<polyline fill="none" stroke="black" points="414.03,-325.9 416,-327.88"/>
<text xml:space="preserve" text-anchor="start" x="377.38" y="-315.32" font-family="Helvetica,sans-Serif" font-size="9.00">scxml</text>
</a>
</g>
</g>
<!-- src/parse/index.mts&#45;&gt;src/parse/scxml -->
<g id="edge15" class="edge">
<title>src/parse/index.mts&#45;&gt;src/parse/scxml</title>
<path fill="none" stroke="#ff00ff" stroke-width="2" stroke-dasharray="5,2" stroke-opacity="0.466667" d="M269.25,-298.16C269.25,-306.99 269.25,-319 269.25,-319 269.25,-319 352.5,-319 352.5,-319"/>
<polygon fill="#ff00ff" fill-opacity="0.466667" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" points="352.5,-321.1 358.5,-319 352.5,-316.9 352.5,-321.1"/>
</g>
<!-- src/parse/smcat&#45;ast.schema.mts -->
<g id="node12" class="node">
<title>src/parse/smcat&#45;ast.schema.mts</title>
<g id="a_node12"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/parse/smcat-ast.schema.mts" xlink:title="smcat&#45;ast.schema.mts">
<path fill="#ffccff" stroke="black" d="M436.08,-297.88C436.08,-297.88 341.92,-297.88 341.92,-297.88 338.96,-297.88 336,-294.92 336,-291.96 336,-291.96 336,-286.04 336,-286.04 336,-283.08 338.96,-280.12 341.92,-280.12 341.92,-280.12 436.08,-280.12 436.08,-280.12 439.04,-280.12 442,-283.08 442,-286.04 442,-286.04 442,-291.96 442,-291.96 442,-294.92 439.04,-297.88 436.08,-297.88"/>
<text xml:space="preserve" text-anchor="start" x="344" y="-285.32" font-family="Helvetica,sans-Serif" font-size="9.00">smcat&#45;ast.schema.mts</text>
</a>
</g>
</g>
<!-- src/parse/index.mts&#45;&gt;src/parse/smcat&#45;ast.schema.mts -->
<g id="edge16" class="edge">
<title>src/parse/index.mts&#45;&gt;src/parse/smcat&#45;ast.schema.mts</title>
<path fill="none" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" d="M288.38,-289C288.38,-289 326.5,-289 326.5,-289"/>
<polygon fill="#ff00ff" fill-opacity="0.466667" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" points="326.5,-291.1 332.5,-289 326.5,-286.9 326.5,-291.1"/>
</g>
<!-- src/parse/smcat -->
<g id="node13" class="node">
<title>src/parse/smcat</title>
<g id="a_node13"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/parse/smcat" xlink:title="smcat">
<polygon fill="#ffccff" stroke="black" points="416,-357.88 363.97,-357.88 362,-355.9 362,-340.12 414.03,-340.12 416,-342.1 416,-357.88"/>
<polyline fill="none" stroke="black" points="414.03,-355.9 362,-355.9"/>
<polyline fill="none" stroke="black" points="414.03,-355.9 414.03,-340.12"/>
<polyline fill="none" stroke="black" points="414.03,-355.9 416,-357.88"/>
<text xml:space="preserve" text-anchor="start" x="377" y="-345.32" font-family="Helvetica,sans-Serif" font-size="9.00">smcat</text>
</a>
</g>
</g>
<!-- src/parse/index.mts&#45;&gt;src/parse/smcat -->
<g id="edge17" class="edge">
<title>src/parse/index.mts&#45;&gt;src/parse/smcat</title>
<path fill="none" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" d="M251.25,-298.38C251.25,-315.25 251.25,-349 251.25,-349 251.25,-349 352.76,-349 352.76,-349"/>
<polygon fill="#ff00ff" fill-opacity="0.466667" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" points="352.76,-351.1 358.76,-349 352.76,-346.9 352.76,-351.1"/>
</g>
<!-- src/transform&#45;&gt;src/counter.mts -->
<g id="edge35" class="edge">
<title>src/transform&#45;&gt;src/counter.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M551.63,-257.96C592.89,-257.96 666.25,-257.96 666.25,-257.96 666.25,-257.96 666.25,-304.65 666.25,-304.65"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="664.15,-304.65 666.25,-310.65 668.35,-304.65 664.15,-304.65"/>
</g>
<!-- src/state&#45;machine&#45;model.mts -->
<g id="node15" class="node">
<title>src/state&#45;machine&#45;model.mts</title>
<g id="a_node15"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/state-machine-model.mts" xlink:title="state&#45;machine&#45;model.mts">
<path fill="#ddfeff" stroke="black" d="M719.33,-223.88C719.33,-223.88 612.42,-223.88 612.42,-223.88 609.46,-223.88 606.5,-220.92 606.5,-217.96 606.5,-217.96 606.5,-212.04 606.5,-212.04 606.5,-209.08 609.46,-206.12 612.42,-206.12 612.42,-206.12 719.33,-206.12 719.33,-206.12 722.29,-206.12 725.25,-209.08 725.25,-212.04 725.25,-212.04 725.25,-217.96 725.25,-217.96 725.25,-220.92 722.29,-223.88 719.33,-223.88"/>
<text xml:space="preserve" text-anchor="start" x="614.5" y="-211.32" font-family="Helvetica,sans-Serif" font-size="9.00">state&#45;machine&#45;model.mts</text>
</a>
</g>
</g>
<!-- src/transform&#45;&gt;src/state&#45;machine&#45;model.mts -->
<g id="edge36" class="edge">
<title>src/transform&#45;&gt;src/state&#45;machine&#45;model.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M551.76,-252.04C580.13,-252.04 620.25,-252.04 620.25,-252.04 620.25,-252.04 620.25,-233.37 620.25,-233.37"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="622.35,-233.37 620.25,-227.37 618.15,-233.37 622.35,-233.37"/>
</g>
<!-- src/index.mts -->
<g id="node9" class="node">
<title>src/index.mts</title>
<g id="a_node9"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/index.mts" xlink:title="index.mts">
<path fill="#ddfeff" stroke="black" d="M167.08,-241.88C167.08,-241.88 123.92,-241.88 123.92,-241.88 120.96,-241.88 118,-238.92 118,-235.96 118,-235.96 118,-230.04 118,-230.04 118,-227.08 120.96,-224.12 123.92,-224.12 123.92,-224.12 167.08,-224.12 167.08,-224.12 170.04,-224.12 173,-227.08 173,-230.04 173,-230.04 173,-235.96 173,-235.96 173,-238.92 170.04,-241.88 167.08,-241.88"/>
<text xml:space="preserve" text-anchor="start" x="126" y="-229.32" font-family="Helvetica,sans-Serif" font-size="9.00">index.mts</text>
</a>
</g>
</g>
<!-- src/index.mts&#45;&gt;src/version.mts -->
<g id="edge13" class="edge">
<title>src/index.mts&#45;&gt;src/version.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M173.36,-227.68C188.13,-227.68 203.25,-227.68 203.25,-227.68 203.25,-227.68 203.25,-41.96 203.25,-41.96 203.25,-41.96 219.83,-41.96 219.83,-41.96"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="219.83,-44.06 225.83,-41.96 219.83,-39.86 219.83,-44.06"/>
</g>
<!-- src/index.mts&#45;&gt;src/options.mts -->
<g id="edge9" class="edge">
<title>src/index.mts&#45;&gt;src/options.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M145.25,-223.74C145.25,-211.46 145.25,-191.29 145.25,-191.29 145.25,-191.29 666.25,-191.29 666.25,-191.29 666.25,-191.29 666.25,-146.37 666.25,-146.37"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="668.35,-146.37 666.25,-140.37 664.15,-146.37 668.35,-146.37"/>
</g>
<!-- src/index.mts&#45;&gt;src/parse/index.mts -->
<g id="edge10" class="edge">
<title>src/index.mts&#45;&gt;src/parse/index.mts</title>
<path fill="none" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" d="M173.28,-238.32C207.24,-238.32 260.25,-238.32 260.25,-238.32 260.25,-238.32 260.25,-270.68 260.25,-270.68"/>
<polygon fill="#ff00ff" fill-opacity="0.466667" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" points="258.15,-270.68 260.25,-276.68 262.35,-270.68 258.15,-270.68"/>
</g>
<!-- src/index.mts&#45;&gt;src/transform -->
<g id="edge12" class="edge">
<title>src/index.mts&#45;&gt;src/transform</title>
<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M173.35,-234.78C260.82,-234.78 524.25,-234.78 524.25,-234.78 524.25,-234.78 524.25,-238.32 524.25,-238.32"/>
<polygon fill="none" stroke="#000000" stroke-opacity="0.200000" points="522.15,-238.32 524.25,-244.32 526.35,-238.32 522.15,-238.32"/>
</g>
<!-- src/render/index.mts -->
<g id="node10" class="node">
<title>src/render/index.mts</title>
<g id="a_node10"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/render/index.mts" xlink:title="index.mts">
<path fill="#ccccff" stroke="black" d="M282.08,-154.88C282.08,-154.88 238.92,-154.88 238.92,-154.88 235.96,-154.88 233,-151.92 233,-148.96 233,-148.96 233,-143.04 233,-143.04 233,-140.08 235.96,-137.12 238.92,-137.12 238.92,-137.12 282.08,-137.12 282.08,-137.12 285.04,-137.12 288,-140.08 288,-143.04 288,-143.04 288,-148.96 288,-148.96 288,-151.92 285.04,-154.88 282.08,-154.88"/>
<text xml:space="preserve" text-anchor="start" x="241" y="-142.32" font-family="Helvetica,sans-Serif" font-size="9.00">index.mts</text>
</a>
</g>
</g>
<!-- src/index.mts&#45;&gt;src/render/index.mts -->
<g id="edge11" class="edge">
<title>src/index.mts&#45;&gt;src/render/index.mts</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M173.3,-231.22C203.12,-231.22 246.25,-231.22 246.25,-231.22 246.25,-231.22 246.25,-164.15 246.25,-164.15"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="248.35,-164.15 246.25,-158.15 244.15,-164.15 248.35,-164.15"/>
</g>
<!-- src/render/dot -->
<g id="node16" class="node">
<title>src/render/dot</title>
<g id="a_node16"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/render/dot" xlink:title="dot">
<polygon fill="#ccccff" stroke="black" points="551.25,-147.88 499.22,-147.88 497.25,-145.9 497.25,-130.12 549.28,-130.12 551.25,-132.1 551.25,-147.88"/>
<polyline fill="none" stroke="black" points="549.28,-145.9 497.25,-145.9"/>
<polyline fill="none" stroke="black" points="549.28,-145.9 549.28,-130.12"/>
<polyline fill="none" stroke="black" points="549.28,-145.9 551.25,-147.88"/>
<text xml:space="preserve" text-anchor="start" x="517.88" y="-135.32" font-family="Helvetica,sans-Serif" font-size="9.00">dot</text>
</a>
</g>
</g>
<!-- src/render/index.mts&#45;&gt;src/render/dot -->
<g id="edge26" class="edge">
<title>src/render/index.mts&#45;&gt;src/render/dot</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-dasharray="5,2" stroke-opacity="0.466667" d="M288.23,-145.19C288.23,-145.19 487.87,-145.19 487.87,-145.19"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="487.87,-147.29 493.87,-145.19 487.87,-143.09 487.87,-147.29"/>
</g>
<!-- src/render/scjson -->
<g id="node17" class="node">
<title>src/render/scjson</title>
<g id="a_node17"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/render/scjson" xlink:title="scjson">
<polygon fill="#ccccff" stroke="black" points="551.25,-183.88 499.22,-183.88 497.25,-181.9 497.25,-166.12 549.28,-166.12 551.25,-168.1 551.25,-183.88"/>
<polyline fill="none" stroke="black" points="549.28,-181.9 497.25,-181.9"/>
<polyline fill="none" stroke="black" points="549.28,-181.9 549.28,-166.12"/>
<polyline fill="none" stroke="black" points="549.28,-181.9 551.25,-183.88"/>
<text xml:space="preserve" text-anchor="start" x="511.12" y="-171.32" font-family="Helvetica,sans-Serif" font-size="9.00">scjson</text>
</a>
</g>
</g>
<!-- src/render/index.mts&#45;&gt;src/render/scjson -->
<g id="edge27" class="edge">
<title>src/render/index.mts&#45;&gt;src/render/scjson</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-dasharray="5,2" stroke-opacity="0.466667" d="M288.23,-150.21C355.94,-150.21 524.25,-150.21 524.25,-150.21 524.25,-150.21 524.25,-156.74 524.25,-156.74"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="522.15,-156.74 524.25,-162.74 526.35,-156.74 522.15,-156.74"/>
</g>
<!-- src/render/scxml -->
<g id="node18" class="node">
<title>src/render/scxml</title>
<g id="a_node18"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/render/scxml" xlink:title="scxml">
<polygon fill="#ccccff" stroke="black" points="416,-183.88 363.97,-183.88 362,-181.9 362,-166.12 414.03,-166.12 416,-168.1 416,-183.88"/>
<polyline fill="none" stroke="black" points="414.03,-181.9 362,-181.9"/>
<polyline fill="none" stroke="black" points="414.03,-181.9 414.03,-166.12"/>
<polyline fill="none" stroke="black" points="414.03,-181.9 416,-183.88"/>
<text xml:space="preserve" text-anchor="start" x="377.38" y="-171.32" font-family="Helvetica,sans-Serif" font-size="9.00">scxml</text>
</a>
</g>
</g>
<!-- src/render/index.mts&#45;&gt;src/render/scxml -->
<g id="edge28" class="edge">
<title>src/render/index.mts&#45;&gt;src/render/scxml</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-dasharray="5,2" stroke-opacity="0.466667" d="M288.28,-152.54C322.24,-152.54 375.25,-152.54 375.25,-152.54 375.25,-152.54 375.25,-156.84 375.25,-156.84"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="373.15,-156.84 375.25,-162.84 377.35,-156.84 373.15,-156.84"/>
</g>
<!-- src/render/smcat.mts -->
<g id="node19" class="node">
<title>src/render/smcat.mts</title>
<g id="a_node19"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/render/smcat.mts" xlink:title="smcat.mts">
<path fill="#ccccff" stroke="black" d="M411.33,-95.88C411.33,-95.88 366.67,-95.88 366.67,-95.88 363.71,-95.88 360.75,-92.92 360.75,-89.96 360.75,-89.96 360.75,-84.04 360.75,-84.04 360.75,-81.08 363.71,-78.12 366.67,-78.12 366.67,-78.12 411.33,-78.12 411.33,-78.12 414.29,-78.12 417.25,-81.08 417.25,-84.04 417.25,-84.04 417.25,-89.96 417.25,-89.96 417.25,-92.92 414.29,-95.88 411.33,-95.88"/>
<text xml:space="preserve" text-anchor="start" x="368.75" y="-83.33" font-family="Helvetica,sans-Serif" font-size="9.00">smcat.mts</text>
</a>
</g>
</g>
<!-- src/render/index.mts&#45;&gt;src/render/smcat.mts -->
<g id="edge29" class="edge">
<title>src/render/index.mts&#45;&gt;src/render/smcat.mts</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-dasharray="5,2" stroke-opacity="0.466667" d="M288.36,-139.81C303.13,-139.81 318.25,-139.81 318.25,-139.81 318.25,-139.81 318.25,-87 318.25,-87 318.25,-87 351.6,-87 351.6,-87"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="351.6,-89.1 357.6,-87 351.6,-84.9 351.6,-89.1"/>
</g>
<!-- src/render/vector -->
<g id="node20" class="node">
<title>src/render/vector</title>
<g id="a_node20"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/render/vector" xlink:title="vector">
<polygon fill="#ccccff" stroke="black" points="416,-125.88 363.97,-125.88 362,-123.9 362,-108.12 414.03,-108.12 416,-110.1 416,-125.88"/>
<polyline fill="none" stroke="black" points="414.03,-123.9 362,-123.9"/>
<polyline fill="none" stroke="black" points="414.03,-123.9 414.03,-108.12"/>
<polyline fill="none" stroke="black" points="414.03,-123.9 416,-125.88"/>
<text xml:space="preserve" text-anchor="start" x="376.62" y="-113.33" font-family="Helvetica,sans-Serif" font-size="9.00">vector</text>
</a>
</g>
</g>
<!-- src/render/index.mts&#45;&gt;src/render/vector -->
<g id="edge30" class="edge">
<title>src/render/index.mts&#45;&gt;src/render/vector</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-dasharray="5,2" stroke-opacity="0.466667" d="M288.44,-142.5C326.3,-142.5 389.25,-142.5 389.25,-142.5 389.25,-142.5 389.25,-135.23 389.25,-135.23"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="391.35,-135.23 389.25,-129.23 387.15,-135.23 391.35,-135.23"/>
</g>
<!-- src/parse/scxml&#45;&gt;src/counter.mts -->
<g id="edge19" class="edge">
<title>src/parse/scxml&#45;&gt;src/counter.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M416.31,-323.29C416.31,-323.29 625.11,-323.29 625.11,-323.29"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="625.11,-325.39 631.11,-323.29 625.11,-321.19 625.11,-325.39"/>
</g>
<!-- src/parse/scxml&#45;&gt;src/transform -->
<g id="edge20" class="edge">
<title>src/parse/scxml&#45;&gt;src/transform</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M416.34,-318.71C436.44,-318.71 460.25,-318.71 460.25,-318.71 460.25,-318.71 460.25,-257.96 460.25,-257.96 460.25,-257.96 487.71,-257.96 487.71,-257.96"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="487.71,-260.06 493.71,-257.96 487.71,-255.86 487.71,-260.06"/>
</g>
<!-- src/parse/parser&#45;helpers.mts -->
<g id="node14" class="node">
<title>src/parse/parser&#45;helpers.mts</title>
<g id="a_node14"><a xlink:href="https://github.com/sverweij/state-machine-cat/blob/main/src/parse/parser-helpers.mts" xlink:title="parser&#45;helpers.mts">
<path fill="#ffccff" stroke="black" d="M564.58,-309.88C564.58,-309.88 483.92,-309.88 483.92,-309.88 480.96,-309.88 478,-306.92 478,-303.96 478,-303.96 478,-298.04 478,-298.04 478,-295.08 480.96,-292.12 483.92,-292.12 483.92,-292.12 564.58,-292.12 564.58,-292.12 567.54,-292.12 570.5,-295.08 570.5,-298.04 570.5,-298.04 570.5,-303.96 570.5,-303.96 570.5,-306.92 567.54,-309.88 564.58,-309.88"/>
<text xml:space="preserve" text-anchor="start" x="486" y="-297.32" font-family="Helvetica,sans-Serif" font-size="9.00">parser&#45;helpers.mts</text>
</a>
</g>
</g>
<!-- src/parse/scxml&#45;&gt;src/parse/parser&#45;helpers.mts -->
<g id="edge21" class="edge">
<title>src/parse/scxml&#45;&gt;src/parse/parser&#45;helpers.mts</title>
<path fill="none" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" d="M389.25,-309.68C389.25,-306.57 389.25,-303.88 389.25,-303.88 389.25,-303.88 468.76,-303.88 468.76,-303.88"/>
<polygon fill="#ff00ff" fill-opacity="0.466667" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" points="468.76,-305.98 474.76,-303.88 468.76,-301.78 468.76,-305.98"/>
</g>
<!-- src/parse/smcat&#45;&gt;src/counter.mts -->
<g id="edge22" class="edge">
<title>src/parse/smcat&#45;&gt;src/counter.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M416.34,-351.96C486.29,-351.96 666.25,-351.96 666.25,-351.96 666.25,-351.96 666.25,-341.19 666.25,-341.19"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="668.35,-341.19 666.25,-335.19 664.15,-341.19 668.35,-341.19"/>
</g>
<!-- src/parse/smcat&#45;&gt;src/parse/parser&#45;helpers.mts -->
<g id="edge23" class="edge">
<title>src/parse/smcat&#45;&gt;src/parse/parser&#45;helpers.mts</title>
<path fill="none" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" d="M416.37,-346.04C455.89,-346.04 524.25,-346.04 524.25,-346.04 524.25,-346.04 524.25,-319.14 524.25,-319.14"/>
<polygon fill="#ff00ff" fill-opacity="0.466667" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.466667" points="526.35,-319.14 524.25,-313.14 522.15,-319.14 526.35,-319.14"/>
</g>
<!-- src/parse/parser&#45;helpers.mts&#45;&gt;src/state&#45;machine&#45;model.mts -->
<g id="edge18" class="edge">
<title>src/parse/parser&#45;helpers.mts&#45;&gt;src/state&#45;machine&#45;model.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M561.25,-291.8C561.25,-269.61 561.25,-215 561.25,-215 561.25,-215 597.2,-215 597.2,-215"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="597.2,-217.1 603.2,-215 597.2,-212.9 597.2,-217.1"/>
</g>
<!-- src/render/dot&#45;&gt;src/options.mts -->
<g id="edge24" class="edge">
<title>src/render/dot&#45;&gt;src/options.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M551.59,-140.54C588.65,-140.54 650.25,-140.54 650.25,-140.54 650.25,-140.54 650.25,-140.2 650.25,-140.2"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="652.35,-146.14 650.25,-140.14 648.15,-146.14 652.35,-146.14"/>
</g>
<!-- src/render/dot&#45;&gt;src/state&#45;machine&#45;model.mts -->
<g id="edge25" class="edge">
<title>src/render/dot&#45;&gt;src/state&#45;machine&#45;model.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M551.58,-144.21C581.49,-144.21 625.25,-144.21 625.25,-144.21 625.25,-144.21 625.25,-196.72 625.25,-196.72"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="623.15,-196.72 625.25,-202.72 627.35,-196.72 623.15,-196.72"/>
</g>
<!-- src/render/scjson&#45;&gt;src/state&#45;machine&#45;model.mts -->
<g id="edge31" class="edge">
<title>src/render/scjson&#45;&gt;src/state&#45;machine&#45;model.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M551.36,-175C578.49,-175 616.25,-175 616.25,-175 616.25,-175 616.25,-196.7 616.25,-196.7"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="614.15,-196.7 616.25,-202.7 618.35,-196.7 614.15,-196.7"/>
</g>
<!-- src/render/scxml&#45;&gt;src/render/scjson -->
<g id="edge32" class="edge">
<title>src/render/scxml&#45;&gt;src/render/scjson</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M416.37,-175C416.37,-175 487.89,-175 487.89,-175"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="487.89,-177.1 493.89,-175 487.89,-172.9 487.89,-177.1"/>
</g>
<!-- src/render/vector&#45;&gt;src/options.mts -->
<g id="edge33" class="edge">
<title>src/render/vector&#45;&gt;src/options.mts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M416.49,-113.62C489.25,-113.62 681.25,-113.62 681.25,-113.62 681.25,-113.62 681.25,-114.14 681.25,-114.14"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="679.15,-109.79 681.25,-115.79 683.35,-109.79 679.15,-109.79"/>
</g>
<!-- src/render/vector&#45;&gt;src/render/dot -->
<g id="edge34" class="edge">
<title>src/render/vector&#45;&gt;src/render/dot</title>
<path fill="none" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" d="M402.25,-126.09C402.25,-129.97 402.25,-133.62 402.25,-133.62 402.25,-133.62 487.84,-133.62 487.84,-133.62"/>
<polygon fill="#0000ff" fill-opacity="0.466667" stroke="#0000ff" stroke-width="2" stroke-opacity="0.466667" points="487.84,-135.73 493.84,-133.63 487.84,-131.53 487.84,-135.73"/>
</g>
</g>
</svg>
    <script>
      var gMode = new Mode();

var title2ElementMap = (function makeElementMap() {
  /** @type {NodeListOf<SVGGElement>} */
  var nodes = document.querySelectorAll(".node");
  /** @type {NodeListOf<SVGGElement>} */
  var edges = document.querySelectorAll(".edge");
  return new Title2ElementMap(edges, nodes);
})();

function getHoverHandler(pTitle2ElementMap) {
  /** @type {string} */
  var currentHighlightedTitle = "";

  /** @param {MouseEvent} pMouseEvent */
  return function hoverHighlightHandler(pMouseEvent) {
    var closestNodeOrEdge = pMouseEvent.target.closest(".edge, .node");
    var closestTitleText = getTitleText(closestNodeOrEdge);

    if (
      currentHighlightedTitle !== closestTitleText &&
      gMode.get() === gMode.HOVER
    ) {
      resetNodesAndEdges();
      addHighlight(closestNodeOrEdge);
      pTitle2ElementMap.get(closestTitleText).forEach(addHighlight);
      currentHighlightedTitle = closestTitleText;
    }
  };
}

function getSelectHandler(pTitle2ElementMap) {
  /** @type {string} */
  var currentHighlightedTitle = "";

  /** @param {MouseEvent} pMouseEvent */
  return function selectHighlightHandler(pMouseEvent) {
    pMouseEvent.preventDefault();

    var closestNodeOrEdge = pMouseEvent.target.closest(".edge, .node");
    var closestTitleText = getTitleText(closestNodeOrEdge);

    if (closestNodeOrEdge) {
      gMode.setToSelect();
    } else {
      gMode.setToHover();
    }
    if (currentHighlightedTitle !== closestTitleText) {
      resetNodesAndEdges();
      addHighlight(closestNodeOrEdge);
      pTitle2ElementMap.get(closestTitleText).forEach(addHighlight);
      currentHighlightedTitle = closestTitleText;
    }
  };
}
function Mode() {
  var HOVER = 1;
  var SELECT = 2;

  function setToHover() {
    this._mode = HOVER;
  }
  function setToSelect() {
    this._mode = SELECT;
  }

  /**
   * @returns {number}
   */
  function get() {
    return this._mode || HOVER;
  }

  return {
    HOVER: HOVER,
    SELECT: SELECT,
    setToHover: setToHover,
    setToSelect: setToSelect,
    get: get,
  };
}

/**
 *
 * @param {SVGGelement[]} pEdges
 * @param {SVGGElement[]} pNodes
 * @return {{get: (pTitleText:string) => SVGGElement[]}}
 */
function Title2ElementMap(pEdges, pNodes) {
  /* {{[key: string]: SVGGElement[]}} */
  var elementMap = buildMap(pEdges, pNodes);

  /**
   * @param {NodeListOf<SVGGElement>} pEdges
   * @param {NodeListOf<SVGGElement>} pNodes
   * @return {{[key: string]: SVGGElement[]}}
   */
  function buildMap(pEdges, pNodes) {
    var title2NodeMap = buildTitle2NodeMap(pNodes);

    return nodeListToArray(pEdges).reduce(addEdgeToMap(title2NodeMap), {});
  }
  /**
   * @param {NodeListOf<SVGGElement>} pNodes
   * @return {{[key: string]: SVGGElement}}
   */
  function buildTitle2NodeMap(pNodes) {
    return nodeListToArray(pNodes).reduce(addNodeToMap, {});
  }

  function addNodeToMap(pMap, pNode) {
    var titleText = getTitleText(pNode);

    if (titleText) {
      pMap[titleText] = pNode;
    }
    return pMap;
  }

  function addEdgeToMap(pNodeMap) {
    return function (pEdgeMap, pEdge) {
      /** @type {string} */
      var titleText = getTitleText(pEdge);

      if (titleText) {
        var edge = pryEdgeFromTitle(titleText);

        pEdgeMap[titleText] = [pNodeMap[edge.from], pNodeMap[edge.to]];
        (pEdgeMap[edge.from] || (pEdgeMap[edge.from] = [])).push(pEdge);
        (pEdgeMap[edge.to] || (pEdgeMap[edge.to] = [])).push(pEdge);
      }
      return pEdgeMap;
    };
  }

  /**
   *
   * @param {string} pString
   * @return {{from?: string; to?:string;}}
   */
  function pryEdgeFromTitle(pString) {
    var nodeNames = pString.split(/\s*->\s*/);

    return {
      from: nodeNames.shift(),
      to: nodeNames.shift(),
    };
  }
  /**
   *
   * @param {string} pTitleText
   * @return {SVGGElement[]}
   */
  function get(pTitleText) {
    return (pTitleText && elementMap[pTitleText]) || [];
  }
  return {
    get: get,
  };
}

/**
 * @param {SVGGElement} pGElement
 * @return {string?}
 */
function getTitleText(pGElement) {
  /** @type {SVGTitleElement} */
  var title = pGElement && pGElement.querySelector("title");
  /** @type {string} */
  var titleText = title && title.textContent;

  if (titleText) {
    titleText = titleText.trim();
  }
  return titleText;
}

/**
 * @param {NodeListOf<Element>} pNodeList
 * @return {Element[]}
 */
function nodeListToArray(pNodeList) {
  var lReturnValue = [];

  pNodeList.forEach(function (pElement) {
    lReturnValue.push(pElement);
  });

  return lReturnValue;
}

function resetNodesAndEdges() {
  nodeListToArray(document.querySelectorAll(".current")).forEach(
    removeHighlight,
  );
}

/**
 * @param {SVGGElement} pGElement
 */
function removeHighlight(pGElement) {
  if (pGElement && pGElement.classList) {
    pGElement.classList.remove("current");
  }
}

/**
 * @param {SVGGElement} pGroup
 */
function addHighlight(pGroup) {
  if (pGroup && pGroup.classList) {
    pGroup.classList.add("current");
  }
}

var gHints = {
  HIDDEN: 1,
  SHOWN: 2,
  state: 1, // === HIDDEN
  show: function () {
    document.getElementById("hints").removeAttribute("style");
    gHints.state = gHints.SHOWN;
  },
  hide: function () {
    document.getElementById("hints").style = "display:none";
    gHints.state = gHints.HIDDEN;
  },
  toggle: function () {
    if ((gHints.state || gHints.HIDDEN) === gHints.HIDDEN) {
      gHints.show();
    } else {
      gHints.hide();
    }
  },
};

/** @param {KeyboardEvent} pKeyboardEvent */
function keyboardEventHandler(pKeyboardEvent) {
  if (pKeyboardEvent.key === "Escape") {
    resetNodesAndEdges();
    gMode.setToHover();
    gHints.hide();
  }
  if (pKeyboardEvent.key === "F1") {
    pKeyboardEvent.preventDefault();
    gHints.toggle();
  }
}

document.addEventListener("contextmenu", getSelectHandler(title2ElementMap));
document.addEventListener("mouseover", getHoverHandler(title2ElementMap));
document.addEventListener("keydown", keyboardEventHandler);
document.getElementById("close-hints").addEventListener("click", gHints.hide);
document.getElementById("button_help").addEventListener("click", gHints.toggle);
document.querySelector("svg").insertAdjacentHTML(
  "afterbegin",
  `<linearGradient id="edgeGradient">
      <stop offset="0%" stop-color="fuchsia"/>
      <stop offset="100%" stop-color="purple"/>
   </linearGradient>
  `,
);

// Add a small increment to the last value of the path to make gradients on
// horizontal paths work. Without them all browsers I tested with (firefox,
// chrome) do not render the gradient, but instead make the line transparent
// (or the color of the background, I haven't looked into it that deeply,
// but for the hack it doesn't matter which).
function skewLineABit(lDrawingInstructions) {
  var lLastValue = lDrawingInstructions.match(/(\d+\.?\d*)$/)[0];
  // Smaller values than .001 _should_ work as well, but don't in all
  // cases. Even this value is so small that it is not visible to the
  // human eye (tested with the two I have at my disposal).
  var lIncrement = 0.001;
  var lNewLastValue = parseFloat(lLastValue) + lIncrement;

  return lDrawingInstructions.replace(lLastValue, lNewLastValue);
}

nodeListToArray(document.querySelectorAll("path"))
  .filter(function (pElement) {
    return pElement.parentElement.classList.contains("edge");
  })
  .forEach(function (pElement) {
    pElement.attributes.d.value = skewLineABit(pElement.attributes.d.value);
  });

    </script>
  </body>
</html>
